import './App.css'
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import routeConfig from './Router'
import { Layout, Menu } from 'antd'
const { Header, Footer, Sider, Content } = Layout
const { SubMenu } = Menu
function App() {
  return (
    <Router>
      <Layout className="layoutStyle">
        <Sider theme="light">
          <Menu mode="inline" defaultSelectedKeys={[]}>
            <SubMenu key="sub1" title="理论基础">
              <Menu.Item key="1">
                <Link to="/home">声明周期</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" title="基础实践">
              <Menu.Item key="2">
                <Link to="/about">数据更新</Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="/table">表格数据</Link>
              </Menu.Item>
              <Menu.Item key="4">
                <Link to="/y1">父子组件传参</Link>
              </Menu.Item>
              <Menu.Item key="5">
                <Link to="/y2">路由传参</Link>
              </Menu.Item>
              <Menu.Item key="6">
                <Link to="/y4">表单切换</Link>
              </Menu.Item>
              <Menu.Item key="7">
                <Link to="/y5">搜索表单</Link>
              </Menu.Item>
              <Menu.Item key="8">
                <Link to="/y6">表单切换</Link>
              </Menu.Item>
              <Menu.Item key="9">
                <Link to="/y7">表单可控筛选</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          <Content>
            <Switch>
              {routeConfig.map((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={(props) => {
                    return <route.main {...props} />
                  }}
                />
              ))}
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Router>
  )
}

export default App
